<template>
  <div class="app-container">
    <h1 style="text-align: center;margin-bottom: 20px;margin-top: 20px">动态配置中心</h1>
    <div class="app-form">
      <el-form :model="form" ref="form" :rules="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="card">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="span-text">维保任务参数设置</span>
                  <el-button class="card-btn" type="primary" @click="updateConfig()">保存</el-button>
                </div>
                <el-form-item label="完成率" prop="completion-rate">
                  <el-input type="number" v-model="form.d">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="span-text">维保工单参数设置</span>
                  <el-button class="card-btn" type="primary" @click="updateConfig()">保存</el-button>
                </div>
                <el-form-item label="完成时间" prop="delayed-time">
                  <el-input type="number" v-model="form.c">
                    <template slot="append">小时</template>
                  </el-input>
                </el-form-item>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="card">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="span-text">隐患工单参数设置</span>
                  <el-button class="card-btn" type="primary" @click="updateConfig()">保存</el-button>
                </div>
                <el-form-item label="完成时间" prop="completion-rate1">
                  <el-input type="number" v-model="form.b">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="span-text">其他参数</span>
                  <el-button class="card-btn" type="primary" @click="updateConfig()">保存</el-button>
                </div>
                <el-form-item label="电子围栏开启" prop="electronic_fence_status">
                  <el-switch
                      v-model="form.a"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getConfig, updateConfig} from "@/api/dynamicConfig";

export default {
  name: "settings",
  data() {
    return {
      form: {},
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    //获取配置信息
    getConfig() {
      getConfig().then(res => {
        this.form = res.data
      })
    },
    //将小时转换成秒
    changeEvent() {
      this.time = this.time * 60 * 60;
    },
    updateConfig() {
      updateConfig({config: this.config}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "更新配置成功"
        })
      })
    }
  }
}
</script>

<style scoped>
.app-form {
  margin-left: 15%;
  margin-right: 15%;
}

.card {
  margin: 10px auto;
  width: 90%;
}

.card-btn {
  float: right;
}

.span-text {
  font-size: 0.19rem;
  font-weight: bold;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
